<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter开发Tip3》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter开发Tip3》" />
<meta property="og:description" content="
本文主要介绍flutter开发小技巧
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-30T22:48:30+08:00" />
<meta property="article:modified_time" content="2021-07-30T22:48:30+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter开发Tip3》"/>
<meta name="twitter:description" content="
本文主要介绍flutter开发小技巧
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" /><link rel="prev" href="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip2/" /><link rel="next" href="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip4/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter开发Tip3》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter%E5%BC%80%E5%8F%91tip3\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  1255 ,
        "url": "https:\/\/luckly.work\/flutter%E5%BC%80%E5%8F%91tip3\/","datePublished": "2021-07-30T22:48:30+08:00","dateModified": "2021-07-30T22:48:30+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter开发Tip3》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-30">2021-07-30</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 1255 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 3 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li>
      <ul>
        <li><a href="#提高flutter-attach的成功率">提高flutter attach的成功率</a>
          <ul>
            <li><a href="#方案1">方案1</a></li>
            <li><a href="#方案2">方案2</a></li>
            <li><a href="#方案3">方案3</a></li>
          </ul>
        </li>
        <li><a href="#从package中加载json文件">从package中加载json文件</a>
          <ul>
            <li><a href="#背景">背景</a></li>
            <li><a href="#从工程加载json">从工程加载json</a></li>
            <li><a href="#从package加载json">从package加载json</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍flutter开发小技巧</p>
</blockquote>
<h2 id="提高flutter-attach的成功率">提高flutter attach的成功率</h2>
<h3 id="方案1">方案1</h3>
<p>断开wifi，执行flutter attach，attach成功后再链接wifi</p>
<h3 id="方案2">方案2</h3>
<p>通过指定设备uuid进行attach</p>
<ol>
<li>通过<code>flutter devices</code>查找已链接设备列表，获取链接设备的uuid</li>
<li><code>flutter attach -d &lt;#uuid#&gt;</code> 指定想要attach的设备进行连接，例如<code>flutter attach -d AE5D772C-6D56-43AD-83F2-0554257B16C4</code></li>
</ol>
<p><a href="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg"
        data-srcset="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg 1.5x, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg 2x"
        data-sizes="auto"
        alt="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_attach.jpg"
        title="Xnip2020-09-17_02-35-23" /></a></p>
<h3 id="方案3">方案3</h3>
<p>通过指定应用的app-id进行attach</p>
<ol>
<li>同一wifi环境下如果有多台相同项目设备连接中，找到你需要attach的app-id进行连接</li>
<li>执行：<code>flutter attach --app-id &lt;#app_id#&gt;</code>例如：<code>flutter attach --app-id com.xxx.xxx</code></li>
</ol>
<h2 id="从package中加载json文件">从package中加载json文件</h2>
<h3 id="背景">背景</h3>
<p>例如我这里有一个flutter的demo项目叫<code>flutter_demo_package_json_load</code>，在根目录通过命令：<code>flutter create --template=package json_test_package</code>,创建了一个名为<code>json_test_package</code>的package，在package的assets中有一个为test2.json文件，现在需要在package中加载到改文件。</p>
<h3 id="从工程加载json">从工程加载json</h3>
<p>对于普通项目的json文件，加载方式如下：</p>
<ol>
<li>
<p>在项目中添加json文件，例如项目的assets下有一个名为test1.json的文件</p>
</li>
<li>
<p>我们在yaml中添加如下依赖</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 只加载assets下的test1.json文件
assets:
  - assets/test1.json
   
# 或者
# 加载assets下的所有文件
 assets:
  - assets/
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>通过rootBundle加载</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Future&lt;String&gt; _loadFromProjectAsset() async {
  // json file in project,is ok
  return rootBundle.loadString(&#34;assets/test1.json&#34;);
}
</code></pre></td></tr></table>
</div>
</div></li>
</ol>
<p>但是对于package下面json文件上面的方法失效了，使用上面的方法加载将会报错，错误信息如下：</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png"
        data-srcset="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png 1.5x, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png 2x"
        data-sizes="auto"
        alt="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_15.png"
        title="image-20200917144141986" /></a></p>
<p>错误原因是资源路径不对，加载不到，因为rootBundle类没有提供package name的参数，我们只能把package name信息放在资源路径里面。</p>
<h3 id="从package加载json">从package加载json</h3>
<p>灵感来自https://pub.dev/packages/lottie库的<code>Lottie.asset(“assetsPath”,package: “package_name”)</code>方法，因为lottie实现动画的原理也是加载一份json配置，不过这个方法支持指定package配置。</p>
<p><a href="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png" target="_blank" rel="noopener noreffer"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png"
        data-srcset="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png 1.5x, https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png 2x"
        data-sizes="auto"
        alt="https://blog.wangruofeng007.com/images/flutter_tips_s2/flutter_tips_16.png"
        title="image-20200917145538741" /></a></p>
<p>这里的keyName就是我们rootBundle类里面需要用的资源路径，包含带package的情况。</p>
<p>正确的方式如下：</p>
<ol>
<li>
<p>第一步和上面一样，将json文件添加到工程中，假如这里我们package里面的json文件名为test2.json</p>
</li>
<li>
<p>在yaml中添加如下依赖</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback"># 只加载assets下的test2.json文件
assets:
 - assets/test2.json
   
# 或者
# 加载assets下的所有文件
assets:
 - assets/
</code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>通过rootBundle加载，但是path的格式为 <code>packages/&lt;#package_name#&gt;/&lt;#file_path#&gt;</code></p>
</li>
</ol>
<p>这里为</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// json file in package,this is work
Future&lt;String&gt; _loadFromPackageAsset() async {
  // 【importance】 packag json file need use this formate:
  // `packages/$package/$assetName`
  return rootBundle.loadString(&#34;packages/json_test_package/assets/test2.json&#34;);
}
</code></pre></td></tr></table>
</div>
</div><p>通过<code>DefaultAssetBundle</code>也是一样可以</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// This is work too.
Future&lt;String&gt; testLoadJsonFileByDefaultAssetBundle(BuildContext context) {
  // 【importance】 packag json file need use this formate:
  // `packages/$package/$assetName`
  return DefaultAssetBundle.of(context)
      .loadString(&#39;packages/json_test_package/assets/test2.json&#39;);
}
</code></pre></td></tr></table>
</div>
</div><blockquote>
<p><a href="https://github.com/wangruofeng/flutter_demo_package_json_load" target="_blank" rel="noopener noreffer">Demo链接</a></p>
</blockquote></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-30</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" data-title="《Flutter开发Tip3》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" data-title="《Flutter开发Tip3》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" data-title="《Flutter开发Tip3》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter%E5%BC%80%E5%8F%91tip3/" data-title="《Flutter开发Tip3》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/flutter%E5%BC%80%E5%8F%91tip2/" class="prev" rel="prev" title="《Flutter开发Tip2》"><i class="fas fa-angle-left fa-fw"></i>《Flutter开发Tip2》</a>
            <a href="/flutter%E5%BC%80%E5%8F%91tip4/" class="next" rel="next" title="《Flutter开发Tip4》">《Flutter开发Tip4》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
